<!-- 司机详情 -->
<template>
  <div class="dashboard-container driver-detail">
    <div>
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        default-active="1"
      >
        <el-menu-item
          index="1"
          class="horizontal"
          @click="flslfn"
        >基本信息</el-menu-item>
        <el-menu-item
          index="4"
        ><a
          class="horizontal"
          @click="flslfn1"
        >驾驶证信息</a></el-menu-item>
      </el-menu>
    </div>

    <div
      v-if="flas3"
    >
      <driverInfo />
      <!-- <div
        v-if="flas2"
        class="flex"
      >
        <span>员工编号：<i>{{ userinfo.account }}</i>
        </span>
        <span>司机名称：<i>{{ userinfo.name }}</i></span>
        <span>所属机构：<i>{{ userinfo.agency.name }}</i></span>
        <span>电话：<i>{{ userinfo.mobile }}</i></span>
        <span>年龄：<i>{{ userinfo.age }}</i></span>
      </div>
      <div
        v-if="!flas2"
        class="flex"
      >
        <span>员工编号：<el-input
          v-model="userinfo.account"
          :disabled="true"
          style="width: 220px"
          type="text"
        >
        </el-input></span>
        <span>司机名称：<el-input
          v-model="userinfo.name"
          :disabled="true"
          type="text"
          style="width: 220px"
        >
        </el-input>
        </span>
        <span>所属机构 :
          <el-input
            v-model="userinfo.agency.name"
            :disabled="true"
            type="text"
            style="width: 220px"
          >
          </el-input>
        </span>
        <span>电话：
          <el-input
            v-model="userinfo.mobile"
            :disabled="true"
            type="text"
            style="width: 220px"
          >
          </el-input>
        </span>
        <span>年龄：<el-input
          v-model="userinfo.age"
          type="text"
          style="width: 220px"
        >
        </el-input>
        </span>
        <div class="danger1">
          <el-button
            style="width: 110px"
            type="danger"
            @click="driverDetailUpdate"
          >保存</el-button>
          <el-button
            style="width: 110px"
            @click="isokshow"
          >取消</el-button>
        </div>
      </div> -->
    </div>
    <div
      v-if="flas4"
    >
      <driverLicense />
      <!-- <div
        v-if="flas"
        class="flex2"
      >
        <span> 驾驶证号{{ userinfomanger.licenseNumber }}</span>
        <span> 准驾车型：{{ userinfomanger.allowableType }}</span>
        <span> 初次领证日期：{{ userinfomanger.initialCertificateDate }}</span>
        <span> 驾驶证有效期限：{{ userinfomanger.validPeriod }}</span>
        <span> 驾龄：{{ userinfomanger.driverAge }}</span>
        <span> 驾驶证类型：{{ userinfomanger.licenseType }}</span>
        <span> 从业资格证：{{ userinfomanger.qualificationCertificate }}</span>
        <span> 入场证信息：{{ userinfomanger.passCertificate }}</span>
        <div>
          <span> 图片信息</span>
          <img
            :src="userinfomanger.picture[0]"
            alt=""
          />
          <img
            :src="userinfomanger.picture[1]"
            alt=""
          />
        </div>
      </div>
      <div
        v-if="!flas"
        class="flex2"
      >
        <span>
          驾驶证号：<el-input
            v-model="userinfomanger.licenseNumber"
            style="width: 180px"
          ></el-input></span>
        <span>
          准驾车型：<el-input
            v-model="userinfomanger.allowableType"
            style="width: 180px"
          ></el-input></span>
        <span>
          初次领证日期<el-date-picker
            v-model="userinfomanger.initialCertificateDate"
            style="width: 80px"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker></span>
        <span>
          驾驶证有效期限：<el-input
            v-model="userinfomanger.validPeriod"
            style="width: 180px"
          ></el-input></span>
        <span>
          驾龄：<el-input
            v-model="userinfomanger.driverAge"
            style="width: 180px"
          ></el-input></span>
        <span>
          驾驶证类型：<el-input
            v-model="userinfomanger.licenseType"
            style="width: 180px"
          ></el-input></span>
        <span>
          从业资格证：<el-input
            v-model="userinfomanger.qualificationCertificate"
            style="width: 180px"
          ></el-input></span>
        <span>
          入场证信息：<el-input
            v-model="userinfomanger.passCertificate"
            style="width: 180px"
          ></el-input></span>
        <div>
          <span> 图片信息</span>
          <img
            class="obj"
            :src="userinfomanger.picture[0]"
            alt=""
          />
          <img
            class="obj"
            :src="userinfomanger.picture[1]"
            alt=""
          />
        </div>
        <div class="danger1">
          <el-button
            type="danger"
            @click="driverLicenseDetailUpdate"
          >保存</el-button>
          <el-button @click="isokshow">取消</el-button>
        </div>
      </div> -->
    </div>
    <!-- <div
      v-if="flas"
      class="footer3"
    >
      <el-button
        type="danger"
        style="transform: translate(500px, 100px); width: 150px"
        @click="issshowno"
      >编辑</el-button>
    </div> -->
  </div>

</template>
<script>

// import { driverDetail, driverLicenseDetail, driverDetailUpdate, driverLicenseDetailUpdate } from '@/api/transit'
import driverInfo from './components/driver-info.vue'
import driverLicense from './components/driver-license.vue'
export default {
  components: {
    driverInfo,
    driverLicense
  },
  data() {
    return {
      flas3: true,
      flas2: true,
      flas: true,
      flas4: false,
      userinfo: {},
      userinfomanger: {}
    }
  },
  created() {
    // this.getuser()
    // this.getdriverLicenseDetail()
  },
  methods: {
    isokshow() {
      this.flas = true
      this.flas2 = true
    },
    issshowno() {
      this.flas = false
      this.flas2 = false
    },
    flslfn() {
      this.flas3 = true
      this.flas4 = false
      this.flas2 = true
      this.flas = true
    },
    flslfn1() {
      this.flas4 = true
      this.flas3 = false
      this.flas2 = true
      this.flas = true
    }
    // async getuser() {
    //   const res = await driverDetail(this.$route.query.id)
    //   this.userinfo = res.data
    // },
    // async getdriverLicenseDetail() {
    //   const res = await driverLicenseDetail(this.$route.query.id)
    //   this.userinfomanger = res.data
    //   this.userinfomanger.picture = this.userinfomanger.picture.split(',')
    // },
    // async driverDetailUpdate() {
    //   await driverDetailUpdate(this.$route.query.id, { age: this.userinfo.age, avatar: '', mobile: this.userinfo.mobile, name: this.userinfo.name, userId: this.userinfo.userId, workNumber: this.userinfo.account, workStatus: this.userinfo.workStatus })
    //   this.$message.success('保存成功')
    //   this.flas2 = true
    //   this.flas = true
    // },
    // async driverLicenseDetailUpdate() {
    //   this.userinfomanger.picture = this.userinfomanger.picture.join(',')
    //   console.log(this.userinfomanger.picture)
    //   await driverLicenseDetailUpdate(this.userinfomanger)
    //   this.userinfomanger.picture = this.userinfomanger.picture.split(',')
    //   this.$message.success('保存成功')
    //   this.flas = true
    //   this.flas2 = true
    //   console.log(this.userinfomanger.picture)
    // }
  }
}
</script>
  <style
    lang="scss"
    scoped
  >
.active {
  color: #ff643d;
}
</style>

  <style
    lang="scss"
    scoped
  >
  .obj{
    transform: translate(-250px, 57px);
  }
.danger1 {
  transform: translate(422px, 108px);
  height: 200px;
}
.danger {
  transform: translate(500px, 100px);
}
.footer3 {
  height: 200px;
  background: #ffffff;
}
.horizontal {
  font-size: 16px;
}
.flex2 {
  background: #ffffff;
  padding: 40px;
  span {
    display: inline-block;
    width: 30%;
    margin: 10px;
  }
}
img {
  width: 200px;
  height: 200px;
  transform: translate(-170px, 100px);
}
.flex {
  padding: 40px;
  // display: flex;
  span {
    width: 30%;
    display: inline-block;
    margin: 10px;
  }
}
.footer {
  background: #ffffff;
}
.driver-detail {
  /deep/ .el-container {
    flex-direction: column;
    margin-left: 0px;
  }
  .in {
    height: calc(100vh - 205px);
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;
    /deep/ .el-aside {
      padding-bottom: 14px;
      width: 100% !important;
      display: flex;
      background-color: #ffffff;
      border-bottom: 1px solid #e5e7ec;
      text-align: left;
      font-size: 14px;
      .aside-item {
        cursor: pointer;
        &:first-child {
          margin-right: 53px;
          padding-left: 25px;
        }
      }
      .aside-item.active {
        font-size: 16px;
        font-weight: bold;
        color: #20232a;
        &:after {
          content: '';
          display: block;
          background-color: #e15536;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
}
/* .driver-detail { */
  /* padding: 20px; */
/* } */
</style>

